<!-- 设置动态表单组件--中间表单预览 -->
<template>
  <div class="center">
    <div style="height: 100%" v-if="setupData.data">
      <a-form
        class="form-draggable"
        :model="setupData.data"
        autoLabelWidth
        :layout="(layout as Tlayout)"
      >
        <a-row :gutter="16">
          <a-col
            v-for="item in setupData.data"
            :key="item.id"
            :span="item.span || item.subsetControlRel?.span"
          >
            <FormItem
              :name="item.ctlCnName"
              :componentType="item.ctlComponentType"
              :code="item.ctlCode"
              :props="item.props"
              v-model:values="item.ctlValue.ctlValue"
              :required="false"
              :disabled="disabled"
            ></FormItem>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useSetupFormStore } from '@/store';
import clonedeep from 'lodash.clonedeep';
import FormItem from '@/components/DynamicFormsNew/RenderingForm/FormItem/index.vue';
import draggable from 'vuedraggable';
import FormItems from '../../../RenderingForm/FormItem/index.vue';

const store = useSetupFormStore();

const emit = defineEmits(['choiceComponent', 'update:setUpList']);
const fakeValue = ref(['']);

const props = withDefaults(
  //参数说明
  defineProps<{
    setUpList: any[]; //tab显示的tab列表
    choiceUuid?: string;
    layout?: string;
    updata?: any;
    disabled?: boolean;
    fieldNames?: {
      idName?: string;
      labelName?: string;
      componentType?: string;
      fieldName?: string;
    };
  }>(),
  {
    fieldNames: () => ({
      idName: 'id',
      labelName: 'ctlCnName',
      componentType: 'componentType',
      fieldName: 'ctlFieldName'
    }),
    disabled: false
  }
);

const orginData = reactive({ data: [] });
const setupData: any = reactive({ data: [] });
watch(
  () => props.setUpList,
  () => {
    setupData.data = props.setUpList;
  },
  {
    immediate: true
  }
);

onMounted(() => {
  orginData.data = clonedeep(setupData.data);
});

let count = ref(1);
const add = () => {
  count.value++;
  setupData.data = [...setupData.data, ...orginData.data];
  emit('update:setUpList', setupData.data);
};
const del = (e: any) => {
  let index = 0;
  index = setupData.data.findIndex((ele: any) => ele.code === e.code);
  setupData.data.splice(index, 1);

  // 如果是编辑情况下，新增删除的控件id
  if (e.id) {
    store.addControlIds(e.id as number);
  }
};

type Tlayout = 'inline' | 'horizontal' | 'vertical' | undefined;
</script>
<style lang="less" scoped>
.center {
  box-sizing: border-box;
  background: rgb(255, 255, 255);
  // width: 700px;
  padding: 20px;
  height: 100%;
  border-radius: 10px;
  overflow-x: hidden;
  .form-draggable {
    height: 100%;
  }
  .draggable {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    flex-wrap: wrap;
  }
  &-item {
    display: flex;
    position: relative;
    box-sizing: border-box;
    border: #fff solid 1px;
  }
  .mask {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    cursor: pointer;
  }

  &-item-choice {
    display: flex;
    position: relative;
    box-sizing: border-box;
    border: rgb(73, 56, 148) solid 1px;
    .mask {
      background: rgba(22, 93, 255, 0.2);
    }
  }

  &-item:hover {
    border: #000 solid 1px;
  }
}
.del {
  flex: 1;
  cursor: pointer;
  height: 100%;
  z-index: 99999;
  margin: 5px;
  color: red;
}
</style>
